<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>易书网</title>
<link rel="stylesheet" type="text/css" href="/css/index.css" />
	<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="/css/animate-custom.css" />
	<link rel="stylesheet" href="/layui/myicon/iconfont.css" type="text/css">
</head>
<body style="background: #fff url(/images/bg.jpg) repeat top left;">

<div id="container_demo" >
	<a class="hiddenanchor" id="toregister"></a>
	<a class="hiddenanchor" id="tologin"></a>
	<a class="hiddenanchor" id="toPhone"></a>
	<div id="wrapper">
		<div id="login" class="animate form">
			<form  action="" autocomplete="on" id="form">
				<h1>登录</h1>
				<p>
					<label for="username" class="uname" data-icon="u" >您的用户名</label>
					<input id="username" name="username" required="required" type="text" placeholder="请输入用户名\邮箱" oninvalid="setCustomValidity('请填写用户名!');" oninput="setCustomValidity('');"/>
				</p>
				<p>
					<label for="password" class="youpasswd" data-icon="p">你的密码</label>
					<input id="password" name="password" required="required" type="password" placeholder="请输入密码" oninvalid="setCustomValidity('请填写密码！');" oninput="setCustomValidity('');"/>
				</p>
				<p>
					<label for="kaptcha" class="youpasswd" data-icon="p">验证码</label>
					<input id="kaptcha" name="kaptcha" required="required" type="text" placeholder="请输入验证码" oninvalid="setCustomValidity('请填写验证码！');" oninput="setCustomValidity('');" >


					<label><img alt="单击图片刷新！" class="pointer" th:src="@{/common/mall/kaptcha}"
								onclick="this.src='/common/mall/kaptcha?d='+new Date()*1"  id="kepimgs" ></label>

				<h3 id="message" style="color: red;"></h3>
				</p>
				<p class="keeplogin">
					<input type="checkbox" name="loginkeeping" id="loginkeeping" value="on" />
					<label for="loginkeeping">保持登录状态</label>
				</p>

				<p class="login button">
					<input type="submit" value="登录" id="loginSubmit" />
				</p>
				<a href="retrievePassword.html" id="forgetPwd">忘记密码?</a>
				<p class="change_link">
					不是成员?<a href="#toregister" class="to_register">加入我们</a>
							<a href="#toPhone" class="to_phone"> 手机号登录 </a>
				</p>
			</form>
		</div>


		<!--注册		-->
		<div id="register" class="animate form">
			<form  action="" autocomplete="on" id="resets" >
				<h1>注册</h1>
				<p>
					<label for="usernamesignup" class="uname" data-icon="u">用户名</label>
					<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="用户名" oninvalid="setCustomValidity('请填写用户名！');" oninput="setCustomValidity('');" />
				</p>
				<p>
					<label for="nickname" class="nickname" data-icon="u">昵称</label>
					<input id="nickname" name="nickname" required="required" type="text" placeholder="昵称" oninvalid="setCustomValidity('请填写昵称！');" oninput="setCustomValidity('');"/>
				</p>

				<p>
					<label for="passwordsignup" class="youpasswd" data-icon="p">密码</label>
					<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="密码" oninvalid="setCustomValidity('请填写密码！');" oninput="setCustomValidity('');"/>
				</p>
				<p>
					<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">确认密码</label>
					<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="确认密码" oninvalid="setCustomValidity('请填写确认密码！');" oninput="setCustomValidity('');"/>
				</p>
                <p>
                    <label for="tel" class="youmail">联系电话</label>
                    <input id="tel" name="emailsignup" required="required" type="text" placeholder="联系电话" oninvalid="setCustomValidity('请填写联系电话！');" oninput="setCustomValidity('');"/>
                </p>
                <div>
                    <label >验证码：</label>
                    <div>
                        <input id="recode" type="text" name="code"  required="required" placeholder="验证码"/>
                        <i class="iconfont icon-yanzhengma" style="position: fixed;margin-top: 14px;margin-left:-294px;font-size: 16px"/></i>
                    </div>
                    <button id="reCodes" type="button" class="layui-btn">获取验证码</button>
                </div>
				<h3 id="messages" style="color: red;"></h3>
				<p class="signin button">
					<input type="submit" value="注册" id="regSsummit"/>
				</p>
				<p class="change_link">
					已经是成员?<a href="#tologin" class="to_login"> 去登录 </a>
				</p>
			</form>
		</div>



		<div id="phones" class="animate form">
				<h1>手机号登录</h1>
				<form class="layui-form layui-form-pane"  id="phoneLogin">
					<div>
						<label >手机号码：</label>
						<div>
							<input id="phone" type="text" name="phone"  required="required" placeholder="联系电话" oninvalid="setCustomValidity('请填写联系电话！');" oninput="setCustomValidity('');"/>
							<i class="iconfont icon-phone2" style="position: fixed;margin-top: -28px;margin-left:8px;font-size: 16px"/></i>
						</div>
					</div>
					<div>
						<label >验证码：</label>
						<div>
							<input id="kaptchas" type="text" name="code"  required="required" placeholder="验证码" oninvalid="setCustomValidity('请填写验证码！');" oninput="setCustomValidity('');"/>
							<i class="iconfont icon-yanzhengma" style="position: fixed;margin-top: 14px;margin-left:-394px;font-size: 16px"/></i>
						</div>
						<button id="sendCheckCode" type="button" class="layui-btn">获取验证码</button>
					</div>
                    <p class="login button">
                        <input type="submit" value="登录"   style="margin-top: 20px" />
                    </p>
					<p class="change_link">
						不是成员?<a href="#toregister" class="to_register">加入我们</a>
						<a href="#tologin" > 账号登陆 </a>
					</p>
				</form>

		</div>



	</div>

</div>

<script  src="js/jquery-3.4.1.js" th:src="@{/js/jquery-3.4.1.js}"></script>
<script src="/layui/layui.js" ></script>



<script>




	//登陆
	$("#form").submit(function () {
		var username=$("#username").val();
		var password=$("#password").val();
		var kaptcha=$("#kaptcha").val();




		//判断是否勾选了保持登陆框
		if (document.getElementById('loginkeeping').checked){
			var on=$("#loginkeeping").val();
		}else {
			var on=null;
		}


		$.ajax({
			url:"/user/login",
			datatype:"JSON",
			data:{"password":password,"userName":username,"kaptcha":kaptcha,"auto":on},
			type:"post",
			success:function (rs) {
				console.log(rs)
				console.log(kaptcha)
				if (rs.success){
					location.href="/mall/index.html"
				}else {
					$("#message").html("")
					$("#message").append(rs.content);
				}
			}

		})
		return false;
	})












    //注册页
    layui.use('form',function (){
        var form = layui.form;
        var $ = layui.$;

        //注册页获取验证码
        $("#reCodes").click(function () {
            var phone = $("#tel").val();
            if (phone == null || phone == "") {
                layer.msg("请输入手机号码！！！");
                return;
            }
            if(!(/^1[3456789]\d{9}$/.test(phone))){
				layer.msg("手机号码有误，请重填");
                return false;
            }else {
                layer.msg('验证码已发送');
            }

            countDown();
            $.ajax({
                url:"",
                type:"post",
                data:{"phone":phone},
                dataType:"Json",
                success:function (data) {
                    console.log(data);
                    if (data.ok){

                    }
                }
            })
        })
        //注册页倒计时60秒
        var maxTime = 60;
        function countDown(){
            if (maxTime == 0){
                Codes = "";
                $("#reCodes").removeClass("layui-btn-disabled");
                $("#reCodes").removeAttr("disabled")
                $("#reCodes").html("获取验证码");
                maxTime = 60;
            }else{
                $("#reCodes").attr("disabled","disabled");
                $("#reCodes").addClass("layui-btn-disabled");
                form.render();
                $("#reCodes").html(maxTime+"秒后重新获取");
                maxTime--;
                setTimeout(countDown,1000);
            }
        }


        //提交注册
        $("#resets").submit(function () {
            var name=$("#usernamesignup").val();
            var nickName=$("#nickname").val();
            var phone=$("#tel").val();
            var password=$("#passwordsignup").val();
            var repassword=$("#passwordsignup_confirm").val();
            var email=$("#email").val();
            var  code=$("#sendCheckCode").val();

            countDown();


            $.ajax({
                url:"/user/registerUser",
                data:{"userName":name,"nickName":nickName,"phone":phone,"password":password,"repassword":repassword,"email":email},
                datatype:"Json",
                type:"post",
                success:function (rs) {
                    if (rs.success){
                        location.href="/mall/join.html#tologin";
                        $("#resets")[0].reset(); //清空表单
                    }else {
                        $("#messages").html("")
                        $("#messages").append(rs.content);
                    }
                }
            })
            return false;
        })

    })








	//手机号登录
	layui.use('form',function () {
		var form = layui.form;
		var $ = layui.$;


		var code=$("#kaptchas").val();

		$("#sendCheckCode").click(function () {
			var phone = $("#phone").val();
			if (phone == null || phone == "") {
				layer.msg("请输入手机号码！！！");
				return;
			}
			if(!(/^1[3456789]\d{9}$/.test(phone))){
				alert("手机号码有误，请重填");
				return false;
			}else {
                layer.msg('验证码已发送');
            }

			countDown();
			$.ajax({
				url:"",
				type:"post",
				data:{"phone":phone},
				dataType:"Json",
				success:function (data) {
                    console.log(data);
                    if (data.ok){

                    }
				}
			})
		})


		//获取短信发送验证码倒计时
		var maxTime = 60;
		function countDown(){
			if (maxTime == 0){
				checkCode = "";
				$("#sendCheckCode").removeClass("layui-btn-disabled");
				$("#sendCheckCode").removeAttr("disabled")
				$("#sendCheckCode").html("获取验证码");
				maxTime = 60;
			}else{
				$("#sendCheckCode").attr("disabled","disabled");
				$("#sendCheckCode").addClass("layui-btn-disabled");
				form.render();
				$("#sendCheckCode").html(maxTime+"秒后重新获取");
				maxTime--;
				setTimeout(countDown,1000);
			}
		}


        //手机号登陆提交
		$("#phoneLogin").submit(function () {
           return false;
        })
	})





</script>

</body>
</html>